@extends('layouts.back_stage')
@section('content')
  <style>
  /* .container{background:#fff;margin-top:30px} */
  #app{padding:10px}
  [v-cloak] {display: none;}
  .touching{margin-left:10px;float:right}
  .but{margin-right:10px;overflow: hidden;}
  .ingred_sel{width:200px;margin:0 20px 0 5px}
  .shopBg{background:#fff;overflow: hidden;padding:29px 0 28px 20px;margin-top:15px;}
  .table_margin{padding:30px;background:#fff;text-align:center;margin-top:10px}
  .Pagination{margin-top:30px}
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  </style>
  <div class="container">
  <div style="padding:20px 20px 5px 0;overflow:hidden;"><h3 style="float:left;">权限分配设置</h3></div>
      <div class="row app" id="app" v-cloak>
        <div class="but">
          <el-button type="primary" class="touching"   @click='addManage' size="small">添加角色名</el-button>
       </div>
       <div class="shopBg">
              <label>角色名：</label>
              <el-autocomplete class="inline-input" v-model="state1"  :fetch-suggestions="querySearch" placeholder="请输入内容" size="small" :trigger-on-focus="false"  @select="handleSelect" >
                </el-autocomplete>
              <el-button  class="but-left" size="small" @click="seek" type="primary">搜索 </el-button>
              <el-button  class="but-left" size="small"  type="primary" @click="reset" >重置 </el-button>
          </div>
          <div class="table_margin">
               <template>
                  <el-table :data="tableData" border @filter-change="filterTag" size="small"  style="width: 100%">
                    <el-table-column  prop="poopt" label="序号"  :resizable='false'   align="center"  width="50">
                    </el-table-column>
                    <el-table-column align="center" label="公司"  :resizable='false'  column-key="client"  :filters="tabBot_a"  prop="client"> </el-table-column>
                    <el-table-column label="部门" column-key="department"  :resizable='false'  :filters="tabBot_b" align="center" @change="aa" prop="department"> </el-table-column>
                    <el-table-column label="角色名" align="center" :resizable='false'   prop="role"> </el-table-column>
                    <el-table-column fixed="right" label="操作" :resizable='false'   align="center" width="110">
                      <template slot-scope="scope">
                        <el-button type="text" @click="modification(scope)" size="small">修改</el-button>
                        <el-button type="text" @click="remove(scope)" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </template>
               <div class="Pagination">
                  <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange" :total="total"> </el-pagination>
               </div> 
               
          </div>
      </div>
  </div> 
 
  <script>
      const App=new Vue({
        el: '#app',
        data() {
          return {
            restaurants: [],
              state1: '',
              val1:'',
              val11:'',
              demand:{//上面查询
                firm:'',////公司
                type:'',//部门
                role:'',//角色
              },
             tabBot_a:[],//tab里面的下拉内容
             tabBot_b:[],//tab里面的下拉内容
              total:1,//
             current_page:1,//当前页数
             tableData: [],
             conlit:[],
          }
        },
        methods: {
          aa(){
          },
          querySearch(queryString, cb) {
              let self = this
              self.demand.role=''
              $.ajax({
              headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
              type: 'get',
              dataType:'json',
              url: '/distribute/role/index',
              data:{
                name:this.state1
              },
              success:function(res){
                this.conlit=res.content.data
               if(res.content.data!=''){
                console.log(res)
                                var results=[];
                                for(var i=0;i<res.content.data.length;i++){
                                    results.push({
                                        'value':res.content.data[i].rolename,
                                        'id':res.content.data[i].id
                                    })
                                }
                                clearTimeout(this.timeout);
                                this.timeout = setTimeout(() => {
                                    cb(results);
                                }, 2000 * Math.random());
                                $(".el-autocomplete-suggestion.el-popper.is-loading").show();
                           
               }else{
                var results=[];
                clearTimeout(this.timeout);
                      this.timeout = setTimeout(() => {
                          cb(results);
                      }, 2000 * Math.random());
                      $(".el-autocomplete-suggestion.el-popper.is-loading").show();
               }
              }
           })
              },
          
      //下拉选择之后的值
      handleSelect(item) {
        this.demand.role=item.id
      },
     
           //新增管理员
           addManage(){
              window.location.href = "/role/create";
            },
           //搜索
            seek(){
              let that=this
               var opt=[]
               var i=-10
               console.log(this.demand.role)
               if(this.demand.role==''){
                that.refurbish();
                  that.$notify.error({
                            title: '提示',
                            message: '未找到你要搜索的角色名，请输入正确的角色名',
                        });
                        return false;

               }
              $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type: 'get',
                    dataType:'json',
                    url: '/distribute/role/index',
                    data:{
                        client:this.demand.firm,
                        department:this.demand.type,
                        role:this.demand.role,
                        name:that.state1,
                    },
                  }).then(function(res){
                    if(res.content.data!=null){
                  
                    res.content.current_page=that.current_page
                    that.total=res.content.total
                    
                    for(var e in res.content.data){
                      i++;
                      if(res.content.data[e].company==null){
                        res.content.data[e].company=''
                      }
                      if(res.content.data[e].department==null){
                        res.content.data[e].department=''
                      }
                      opt.push({
                        'poopt':i+(10*that.current_page),
                          'client':res.content.data[e].company.company_name,
                          'department':res.content.data[e].department.department,
                          'role':res.content.data[e].rolename,
                          'id':res.content.data[e].id
                        })  
                    }
                    that.tableData=opt
                    }else{
                      that.tableData.splice(0);
                     // console.log(that.tableData)
                      that.$notify.error({
                            title: '提示',
                            message: '未找你你要搜索的角色',
                        });
                        
                        return false;
                    } 
                  })       
            },
           // 重置
           reset(){
            let opt=[]
             let i=-10
            let that=this
             this.state1='',
             this.demand.role='',
             this.demand.firm='',
             this.demand.type='',
             this.val11='',
              $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type: 'get',
                    dataType:'json',
                    url: '/distribute/role/index',
                    data:{
                        client:this.demand.firm,
                        department:this.demand.type,
                        role:this.demand.role,
                    },
                  }).then(function(res){
                   // console.log(res.content)
                    res.content.current_page=that.current_page
                    that.total=res.content.total
                    
                    for(var e in res.content.data){
                      i++;
                      if(res.content.data[e].company==null){
                        res.content.data[e].company=''
                      }
                      if(res.content.data[e].department==null){
                        res.content.data[e].department=''
                      }
                      opt.push({
                         'poopt':i+(10*that.current_page),
                          'client':res.content.data[e].company.company_name,
                          'department':res.content.data[e].department.department,
                          'role':res.content.data[e].rolename,
                          'id':res.content.data[e].id
                        })  
                    }
                    that.tableData=opt
                    
                  })
           },
            //修改
            modification(scope){
                window.location.href = `/role/edit?id=${scope.row.id}`;
            },
            //删除
            remove(scope){
              let that=this
              this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                      type: 'post',
                      url: '/role/delete',
                      data:{
                        id:scope.row.id
                      },
                  }).then(function(res){
                    if(res.result.success==true){
                       that.refurbish();
                            that.$message({
                        type: 'success',
                        message: '删除成功!'
                      });
                    }else{
                      that.$message({
                          type: 'info',
                          message: res.result.errorMsg,
                        });  
                    }
                     
                  })
                 
                }).catch(() => {
                  that.$message({
                    type: 'info',
                    message: '已取消删除'
                  });          
                });
                 
            },
            //tab下拉
            filterTag(value){
             
              this.val11=value.department
                if(value.client!=undefined){
                  var val122=value.client;
                  var stas1='';
                  for(let i=0; i<val122.length;i++){
                      stas1=stas1+val122[i]+',';
                  } 
                  this.demand.firm=stas1.substr(0, stas1.length - 1);
                  let that=this
                  that.tabBot_b=[]
              $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/departments/getall/',
                  dataType:'json',
                  data:{
                    id:this.demand.firm
                  }
              }).then(function(res){
                 for(var e in res.content){
                    that.tabBot_b.push({
                      text:res.content[e].department,
                      value:res.content[e].id
                    })
                 }
              })
                  this.filter();
                }
                if(value.department!=undefined){
                 var val1=value.department;
                 var stas1='';
                for(let i=0; i<val1.length;i++){
                    stas1=stas1+val1[i]+',';
                } 
                this.demand.type=stas1.substr(0, stas1.length - 1);
              
                this.filter();
               }
               if(value.role!=undefined){
                 var val1=value.role;
                 var stas1='';
                for(let i=0; i<val1.length;i++){
                    stas1=stas1+val1[i]+',';
                } 
                this.demand.role=stas1.substr(0, stas1.length - 1);
                this.filter();
               }
              
            },
            //
            filter(){
              let that=this
               var opt=[]
               var i=-10
              $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type: 'get',
                    dataType:'json',
                    url: '/distribute/role/index',
                    data:{
                        client:this.demand.firm,
                        department:this.demand.type,
                        role:this.demand.role,
                    },
                  }).then(function(res){
                    res.content.current_page=that.current_page
                    that.total=res.content.total
                    for(var e in res.content.data){
                      i++;
                      if(res.content.data[e].company==null){
                        res.content.data[e].company=''
                      }
                      if(res.content.data[e].department==null){
                        res.content.data[e].department=''
                      }
                      opt.push({
                           'poopt':i+(10*that.current_page),
                          'client':res.content.data[e].company.company_name,
                          'department':res.content.data[e].department.department,
                          'role':res.content.data[e].rolename,
                          'id':res.content.data[e].id
                        })  
                    }
                    that.tableData=opt
                    
                  })
            },
            //点击页数
            handleCurrentChange(val){
              this.current_page=val
               this.refurbish();
            },
             //表格刷新请求
             refurbish(){
               let that=this
               var opt=[]
               var i=-10
              $.ajax({
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                    type: 'get',
                    dataType:'json',
                    url: '/distribute/role/index',
                    data:{
                        current_page:this.current_page,
                        client:this.demand.firm,
                        department:this.demand.type,
                        role:this.demand.role,
                        name:that.state1,
                    },
                  }).then(function(res){
                    console.log(res.content)
                     if(res.result.success==true){
                    
                    res.content.current_page=that.current_page
                    that.total=res.content.total
                    
                    for(var e in res.content.data){
                      i++;
                      if(res.content.data[e].company==null){
                        res.content.data[e].company=''
                      }
                      if(res.content.data[e].department==null){
                        res.content.data[e].department=''
                      }
                      opt.push({
                         'poopt':i+(10*that.current_page),
                          'client':res.content.data[e].company.company_name,
                          'department':res.content.data[e].department.department,
                          'role':res.content.data[e].rolename,
                          'id':res.content.data[e].id
                        })  
                    }
                    that.tableData=opt
                      }else{
                        that.$notify.error({
                        title: '提示',
                        message: res.result.errorMsg,
                    });
                    } 
                  })
                    
               
              },
                //角色下拉 
            ainValue(val){ 
                this.demand.role=val
             },
            //公司下拉
            Dropdown_a(){
              let that=this
              $.ajax({
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/clients/children',
                  dataType:'json',
              }).then(function(res){
              //  console.log(res)
                for(var e in res.content){
                  that.tabBot_a.push({
                    text:res.content[e].company_name,
                    value:res.content[e].id
                  })
                } 
              })
            },
             //部门下拉
             Dropdown_b(){
              let that=this
              $.ajax({
                  headers: { 'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                  type:'get',
                  url:'/departments/getall/',
                  dataType:'json',
              }).then(function(res){
                 for(var e in res.content){
                    that.tabBot_b.push({
                      text:res.content[e].department,
                      value:res.content[e].id
                    })
                 }
              })
             },
          
          },
       mounted() {
          this.refurbish();
          this. Dropdown_a();
          this. Dropdown_b();
          },
      })
  </script>
@endsection